<template>
	<newDialog :title="title" :dialogVisible="dialogVisible" width="50%" :ensureLoading='ensureLoading' @closeDialog='closeDialog'
	 @submitDialog='submitDialog' :isShowBtn='isShowBtn' class='elList'>
		<div slot='content'>
			<el-form :model="form" ref='form' size="mini" :rules="rules" v-loading='isLoading' label-width="120px">
				<el-row>
					<el-col :span="9">
						<el-form-item label="队列名称:" prop="query">
							<el-input :disabled="detailDisable" v-model="form.query" clearable placeholder="请输入队列名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="9">
						<el-form-item label="队列类型:">
							<el-select :disabled="detailDisable" v-model="form.resource" placeholder="请选择队列类型"  filterable
							 clearable>
								<el-option v-for="item in resourceArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="9">
						<el-form-item label="适用終端:">
							<el-select :disabled="detailDisable" v-model="form.terminal" placeholder="请选择适用終端" filterable
							 clearable>
								<el-option v-for="item in terminalArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="9">
						<el-form-item label="队列描述:">
							<el-input :disabled="detailDisable" type="textarea" resize="none" :rows="4" clearable v-model="form.des"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</newDialog>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosChange,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	import newDialog from '@/components/publicComponents/dialogComp.vue'
	import {
		query
	} from './rules.js'
	export default {
		components: {
			newDialog
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default () {
					return false
				}
			},
			title: {
				type: String,
				default () {
					return '提示'
				}
			},
			rowId: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		mounted(){
			if (this.rowId) {
				this.getComList()
			}
			if(this.title == '播放管理详情'){
				this.isShowBtn = false
			}
		},
		data() {
			return {
				isShowBtn:true,
				ensureLoading:false,
				fileList:[],
				isLoading: false,
				resourceArr: [{
					label: '传媒',
					value: '0'
				}, {
					label: '公告',
					value: '1'
				},{
					label:'滚动',
					value:'2'
				}],
				terminalArr: [{
					label:'单屏',
					value:'0'
				},{
					label:'双屏',
					value:'1'
				}],
				form: {
					query: '',
					resource: '',
					terminal:'',
					des:''
				},
				rules: {
					query
				}
			}
		},
		computed:{
			detailDisable(){
				if(this.title == '播放管理详情'){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			getComList(){
				this.isLoading = true
				let url = 'res/queue/' + this.rowId + '/'
				axiosGet(url, {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.form.query = res.detail.name
						this.form.resource = res.detail.qtype
						this.form.terminal = res.detail.ttype
						this.form.des = res.detail.qdesc
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			closeDialog() {
				this.$emit('closeMask')
			},
			submitDialog() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.ensureLoading = true
						let url = ''
						let method = ''
						let data = {
							name: this.form.query, 
							qtype: this.form.resource, 
							qdesc: this.form.des, 
							ttype: this.form.terminal, 
						}
						if (!this.rowId) {
							url = '/res/queue/'
							method = 'post'
						} else {
							url = '/res/queue/' + this.rowId + '/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.ensureLoading = false
							if (res.code == 0) {
								this.$message.success('操作成功')
								this.$emit('submitDialog')
							} else {
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
